<template>
    <!-- 卡片框 -->
      <el-card class="box-card">
      <!-- 面包屑导航 -->
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/home_Ad' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>订单管理</el-breadcrumb-item>
      </el-breadcrumb>
        <div class="searchBox">
            <el-input
            placeholder="请输入内容"
            v-model="query"
            clearable style="width:500px;margin-right:5px">
            </el-input>
            <el-button  type="primary" icon="el-icon-search" @click="search">查找</el-button>
        </div>
       <!-- 表格区域 -->
           <el-table
            :data="orderList"
            border stripe fit
            empty-text='null'
            class="userTable"
            style="width: 100%;margin-top:12px">
            <el-table-column type="index" label="#" width="40"></el-table-column>
            <el-table-column  prop="username" label="预定用户" width="130">
            </el-table-column>
            <el-table-column  prop="sname" label="预定球馆" width="130">
            </el-table-column>
            <el-table-column  prop="cname" label="预定场地" width="130">
            </el-table-column>
            <el-table-column  prop="order_date" label="预定日期" sortable width="120">
            </el-table-column>
            <el-table-column label="预定时间段" width="170">
                <template slot-scope="scope">
                        {{   scope.row.start_time+'至'+scope.row.end_time}}
                </template>
            </el-table-column>
            <el-table-column   label="订单状态" width="80">
                   <template slot-scope="scope">
                        <el-tag v-if="scope.row.state==1" >预约中</el-tag>
                        <el-tag v-if="scope.row.state==0" type="danger">已失效</el-tag>
                        <el-tag v-if="scope.row.state==2" type="success">已完成</el-tag>
                   </template>
            </el-table-column>
              <el-table-column prop="create_date"  label="下单时间" width="160">
            </el-table-column>
            <el-table-column   label="金额" width="80" prop="price" sortable>
            </el-table-column>
             <el-table-column  label="操作" width="">
                 <template slot-scope="scope">
                         <el-button type="primary" icon="el-icon-edit" size="mini">编辑</el-button>
                         <el-button type="danger"  icon="el-icon-delete" size="mini" @click="removeOrderList(scope.row)">删除</el-button>   
                 </template>
            </el-table-column>  
            

           </el-table>
            <Pagination :pageSize="pagination.pageSize" :total="pagination.total" :pageNo="pagination.currentPage" :continues=5 @getPageNo="goToPageNo" />
      </el-card>
</template>

<script>
import {mapGetters} from 'vuex';
import Api from '../../api';
export default {
    data() {
        return {
            orderList:[],
              // 分页器参数
            pagination:{
                currentPage:'',
                pageSize:'',
                total:''
            },
            query:''
        }
    },
    watch:{
         query(newVal,oldVal){
        if(newVal === '' && oldVal!== ''){
            this.getOrderData();
       }
      }
    },
    computed:{
        ...mapGetters({orderListData:'orderListDataByPage'})
    },
    created() {
        this.getOrderData();
    },
    methods: {
        async getOrderData(){   
          this.$store.dispatch('getOrderListByPage',this.pagination).then(ok=>{
              if(ok){
                  this.orderList = this.orderListData.data;
                  this.pagination = this.orderListData.pagination;
              }
          })
        },
        // 删除订单记录
        async removeOrderList(order){
            this.$confirm('此操作将永久删除该条数据, 是否继续?', '提示', {
            confirmButtonText: '确定',
            showCancelButton:true,
            cancelButtonText: '取消',
            type: 'warning'
            }).then(async() => {
                 const {data:res} = await Api.removeOrderList(order.oid);
             if(res.status !== 200 ) return this.$message.error('删除失败');
                 this.$message.success('删除成功');
                 this.getOrderData();
            }).catch(() => {
            this.$message({
                type: 'info',
                message: '已取消删除'
            });          
            });
           
        },   
        // 跳转到其他页码回调
        goToPageNo(pageNo){
             this.pagination.currentPage = pageNo;
            if(this.query){
            this.search();
            }else
            this.getOrderData();
        },
         // 关键字搜索
        async search(){
          if(this.query){
            const {data:res} = await Api.searchOrderList({query:this.query,pagination:this.pagination})
              if(res.status !== 200) return this.$message.warning(`抱歉没有找到相关订单！`);
                this.orderList = res.data.data;
                this.pagination = res.data.pagination;
            }else{
                this.$message.warning('请输入关键词');
            }
        }
    },
}
</script>

<style scoped lang="less">


    .searchBox{
        margin-top: 20px;
        display: flex;
        
    }

</style>